import React,{useState,useEffect,useRef} from 'react'
// useImperativeHandle
//回顾
// 1 react 属于单向数据流,父组件可以通过属性传值，将父组件内的函数(方法)传递给子组件，实现子组件调用父组件函数的目的
// 2 useRef 可以钩住某些本组件挂载完或重新渲染完成后才拥有的某些对象
// 3 React.forwardRef 可以钩住某些子组件挂载完成或重新渲染完成后才拥有的某些对象

// useImperativeHandle 可以让父组件获取并执行子组件内某些自定义的函数方法
// 本质上是子组件将自己内部的函数方法通过useImperativeHanlde 添加到父组件中useRef定义的对象中

// 基本用法
// useImperativeHandle(ref,create,[deps])函数前2个参数为必填项，第3个参数为选填项
// 第1个参数为父组件通过useRef定义的引用变量
// 第2个参数为子组件要附加给ref的对象，该对象中的属性即子组件想要暴露给父组件的函数方法
// 第3个参数为可选参数，为函数的依赖变量，凡是函数使用到的数据变量都需要加入到deps中，如果没有则忽略

// 代码示例
// useImperativeHandle(ref,()=>({xxx}))
// () => ({xxx}) 表示返回一个object对象，该对象为{XXX}
// () => {XXX} 表示执行xxx语句
// 使用示例
// 有变量count。默认值为0，有一个函数addCount,该函数体内部执行count + 1,
import ImperativeChild from "./ImperativeChild";
function Imperative () {
    const childRef  = useRef(null)
    const clickHandler = () => {
        childRef.current.addCount(); //父组件调用子组件内部 addCount函数
    }
    const clickHandler1 = () => {
        childRef.current.subCount(); //父组件调用子组件内部 addCount函数
    }
    return (
        <div>
            {/* 父组件通过给子组件添加 ref 属性，将childRef传递给子组件，
            子组件获得该引用即可将内部函数添加到childRef中 */}
            <ImperativeChild ref={childRef }></ImperativeChild>
            <button onClick={clickHandler}>add+ 1</button>
            <button onClick={clickHandler1}>sub - 1</button>
        </div>
    )
}
export default Imperative;
